<template>
	<div id="answer">
		<!--答题区-->
		<transition name="slider-fade">
			<div class="answer-content">
				<div class="title">
					<span class="tips">{{topic.type}}</span>
					<span>
						<template v-if="topicCount !== null">
							<i class="el-icon-document"></i>
							共 {{ topicCount }} 题
						</template>
						<el-button type="primary" @click="showAnswers" class="show-answer-btn">查看答案</el-button>
						<el-button type="success" @click="save" class="show-answer-btn">保存</el-button>
					</span>
				</div>

				<div class="topic-container">
					<!-- 单选题 单项选择题 -->
					<div class="oneselect-cotainer" v-if="topic.type == '单选题' || topic.type == '单项选择题'">
						<div class="oneselect-header">
							<span style="font-size: 18px">1.</span>
							<span class="type">单选</span>
							<span class="oneselect-header-title ql-editor" v-html="topic.smallTopic"></span>
							<span class="score">({{ topic.fraction }}分)</span>
						</div>
						<div class="oneselect-body" v-for="(item, i) in topic.options" :key="i">
							<i
								:class="item.keyTrue ? 'el-icon-success' : 'el-icon-error'"
								:style="{ color: item.keyTrue ? '#67c23a' : 'red' }"
							></i>
							<span>{{ String.fromCharCode(i + 65) }}</span>
							.{{ item.context }}
						</div>
						<div v-for="(item2, i2) in topic.options" :key="'info-' + i2">
							<div class="oneselect-floote-answer" v-if="item2.keyTrue">
								答案：
								<span>{{ String.fromCharCode(i2 + 65) }}</span>
								.{{ item2.context }}
							</div>
						</div>
						<div class="oneselect-floote">
							小题讲解：
							<span class="answer">{{ topic.explains }}</span>
						</div>
					</div>
					<!-- 多选题 多项选择题 -->
					<div class="more-cotainer" v-if="topic.type == '多选题' || topic.type == '多项选择题'">
						<div class="more-header">
							<span style="font-size: 18px">1.</span>
							<span class="type">多选</span>
							<span class="oneselect-header-title ql-editor" v-html="topic.smallTopic"></span>
							<span class="score">({{ topic.fraction }}分)</span>
						</div>
						<div class="more-body" v-for="(item, i) in topic.options" :key="i">
							<i
								:class="item.keyTrue ? 'el-icon-success' : 'el-icon-error'"
								:style="{ color: item.keyTrue ? '#67c23a' : 'red' }"
							></i>
							{{ String.fromCharCode(i + 65) }}
							.{{ item.context }}
						</div>
						<div class="more-floote">
							<span class="more-floote-answer">答案：{{ topic.answer }}</span>
						</div>
						<div class="more-floote">
							<span class="answer">小题讲解：{{ topic.explains }}</span>
						</div>
					</div>
					<!-- 填空题 -->
					<div class="bank-cotainer" v-if="topic.type == '填空题'">
						<div class="bank-header">
							<span style="font-size: 18px">1.</span>
							<span class="oneselect-header-title ql-editor" v-html="topic.smallTopic"></span>
						</div>
						<div class="user-input-container">
							<div class="user-input" v-for="(item, i) in topic.options" :key="i">
								<span>填空{{i+1}}</span>
								<input type="text" v-model="us" />
							</div>
						</div>
						<div class="answer-container" v-if="showAnswer">
							<div class="bank-floote">
								<div class="bank-floote-answeritem">
									<div>
										<span>答案：</span>
									</div>
									<div class="bank-floote-answeritem-body">
										<span class="bank-floote-answer" v-for="(item, i) in topic.options" :key="i">
											{{ item.answer }}
											<span>({{ item.fraction }}分)</span>
										</span>
									</div>
								</div>
								<div>
									<span class="bank-floote-explains">小题讲解：{{ topic.explains }}</span>
								</div>
								<div class>
									<span class>一级知识点：</span>
									<span>{{ topic.knowledgeA }}</span>
								</div>
								<div class>
									<span class>二级知识点：</span>
									<span>{{ topic.knowledgeB }}</span>
								</div>
							</div>
						</div>
					</div>
					<!-- 判断题 -->
					<div class="oneselect-cotainer" v-if="topic.type == '判断题'">
						<div class="oneselect-header">
							<span style="font-size: 18px">1.</span>
							<span class="type">判断</span>
							<span class="oneselect-header-title ql-editor" v-html="topic.smallTopic"></span>
							<span class="score">({{ topic.fraction }}分)</span>
						</div>
						<div class="judge-chose">
							<div class="judge-chose-item">
								<i
									:class="topic.answer == 'true' ? 'el-icon-success' : ''"
									:style="{ color: topic.answer == 'true' ? '#67c23a' : '' }"
								></i>正确
							</div>
							<div class="judge-chose-item">
								<i
									:class="topic.answer != 'true' ? 'el-icon-success' : ''"
									:style="{ color: topic.answer != 'true' ? '#67c23a' : '' }"
								></i>错误
							</div>
						</div>
						<div class="judge-floote-answeritem">
							答案：
							<span>{{ topic.answer == 'true' ? '正确' : '错误' }}</span>
						</div>
						<div class="judge-floote">
							小题讲解：
							<span class="answer">{{ topic.explains }}</span>
						</div>
					</div>
					<!-- 简答题 -->
					<div class="brief-cotainer" v-if="topic.type == '简答题'">
						<div class="more-header">
							<span style="font-size: 18px">{{number}}.</span>
							<span class="type">简答</span>
							<span class="oneselect-header-title ql-editor" v-html="topic.smallTopic"></span>
							<span class="score">({{ topic.fraction }}分)</span>
						</div>
						<div class="user-input-container">
							<textarea class="user-textarea" rows="5" v-model="userInput"></textarea>
						</div>
						<div class="answer-container" v-if="showAnswer">
							<div class="answer-detial">
								<span>答案：</span>
								<span>{{ topic.answer }}</span>
							</div>
							<div class="explain">
								<span>小题讲解：</span>
								<span>{{ topic.explains ? topic.explains : '暂无解析'}}</span>
							</div>
							<div class="knowledge">
								<span class>一级知识点：</span>
								<span>{{ topic.knowledgeA }}</span>
							</div>
							<div class="knowledge">
								<span class>二级知识点：</span>
								<span>{{ topic.knowledgeB }}</span>
							</div>
						</div>
					</div>
					<!-- 大题 -->
					<div class="brief-cotainer" v-if="topic.type == '大题'">
						<Audio :audioUrl="topic.audioUrl" />
						<div class="more-header">
							<span style="font-size: 18px">1.</span>
							<span class="type">大题</span>
							<span class="oneselect-header-title ql-editor" v-html="topic.bigQuestion"></span>
							<span class="score">({{ topic.fraction }}分)</span>
						</div>
						<div class="brief-item">
							<el-image
								v-for="(item, index) in showimgList"
								:key="index"
								class="brief-img-detail"
								:src="item"
								:preview-src-list="showimgList"
							>></el-image>
						</div>
						<div class="brief-file">
							<div class="brief-file-down" v-for="(item, index) in showfileList" :key="index">
								<span>文件{{ index + 1 }}</span>
								<el-link target="_blank" :href="item.url" :underline="false" style="margin-left: 15px">
									<el-button size="mini" type="warning">点击下载</el-button>
								</el-link>
							</div>
						</div>

						<div v-for="(item, i) in topic.bankList" :key="i">
							<div class="oneselect-cotainer" v-if="item.type == '单选题' || item.type == '单项选择题'">
								<div class="oneselect-header">
									<span style="font-size: 18px">（{{ i + 1 }}）</span>
									<span class="type">单选</span>
									<span class="oneselect-header-title">{{ item.smallTopic }}</span>
									<span class="score">({{ item.fraction }}分)</span>
								</div>
								<div class="oneselect-body" v-for="(item2, i2) in item.options" :key="i2">
									<el-radio>
										<span>{{ String.fromCharCode(i2 + 65) }}</span>
										.{{ item2.context }}
									</el-radio>
								</div>
								<div class="answer-container" v-if="showAnswer">
									<div v-for="(item2, i2) in item.options" :key="'info-' + i2">
										<div class="oneselect-floote-answer" v-if="item2.keyTrue">
											答案：
											<span>{{ String.fromCharCode(i2 + 65) }}</span>
											.{{ item2.context }}
										</div>
									</div>
									<div class="more-floote">
										<span class="answer">小题讲解：{{ item.explains }}</span>
									</div>
								</div>
							</div>

							<div class="more-cotainer" v-if="item.type == '多选题' || item.type == '多项选择题'">
								<div class="more-header">
									<span style="font-size: 18px">（{{ i + 1 }}）</span>
									<span class="type">多选</span>
									<span class="oneselect-header-title">{{ item.smallTopic }}</span>
									<span class="score">({{ item.fraction }}分)</span>
								</div>
								<div class="more-body" v-for="(item2, i3) in item.options" :key="i3">
									<i
										:class="item2.keyTrue ? 'el-icon-success' : 'el-icon-error'"
										:style="{ color: item2.keyTrue ? '#67c23a' : 'red' }"
									></i>
									{{ String.fromCharCode(i3 + 65) }}
									.{{ item2.context }}
								</div>
								<div class="more-floote">
									<span class="more-floote-answer">答案：{{ item.answer }}</span>
								</div>
								<div class="more-floote">
									<span class="answer">小题讲解：{{ item.explains }}</span>
								</div>
							</div>

							<div class="oneselect-cotainer" v-if="item.type == '判断题'">
								<div class="oneselect-header">
									<span style="font-size: 18px">（{{ i + 1 }}）</span>
									<span class="type">判断</span>
									<span class="oneselect-header-title">{{ item.smallTopic }}</span>
									<span class="score">({{ item.fraction }}分)</span>
								</div>
								<div class="judge-chose">
									<div class="judge-chose-item">
										<i
											:class="item.answer == 'true' ? 'el-icon-success' : ''"
											:style="{ color: item.answer == 'true' ? '#67c23a' : '' }"
										></i>正确
									</div>
									<div class="judge-chose-item">
										<i
											:class="item.answer != 'true' ? 'el-icon-success' : ''"
											:style="{ color: item.answer != 'true' ? '#67c23a' : '' }"
										></i>错误
									</div>
								</div>
								<div class="judge-floote-answeritem">
									答案：
									<span>{{ item.answer == 'true' ? '正确' : '错误' }}</span>
								</div>
								<div class="judge-floote">
									小题讲解：
									<span class="answer">{{ item.explains }}</span>
								</div>
							</div>

							<div class="bank-cotainer" v-if="item.type == '填空题'">
								<div class="bank-header">
									<span style="font-size: 18px">（{{ i + 1 }}）</span>
									<span class="type">填空</span>
									<span class="oneselect-header-title">{{ item.smallTopic }}</span>
								</div>
								<div class="bank-floote">
									<div class="bank-floote-answeritem">
										<div>
											<span>答案：</span>
										</div>
										<div class="bank-floote-answeritem-body">
											<span class="bank-floote-answer" v-for="(item2, i4) in item.options" :key="i4">
												{{ item2.answer }}
												<span>({{ item2.fraction }}分)</span>
											</span>
										</div>
									</div>
									<div>
										<span class="bank-floote-explains">小题讲解：{{ item.explains }}</span>
									</div>
								</div>
							</div>

							<div class="brief-cotainer" v-if="item.type == '简答题'">
								<div class="more-header">
									<span style="font-size: 18px">（{{ i + 1 }}）</span>
									<span class="type">简答</span>
									<span class="oneselect-header-title">{{ item.smallTopic }}</span>
									<span class="score">({{ item.fraction }}分)</span>
								</div>
								<div class="brief-item">
									<el-image
										v-for="(item2, index2) in item.imgList"
										:key="index2"
										class="brief-img-detail"
										:src="item2"
										:preview-src-list="item.imgList"
									>></el-image>
								</div>
								<div class="brief-file">
									<div class="brief-file-down" v-for="(item2, index2) in item.fileList" :key="index2">
										<span>文件{{ index2 + 1 }}</span>
										<el-link target="_blank" :href="item2.url" :underline="false" style="margin-left: 15px">
											<el-button size="mini" type="warning">点击下载</el-button>
										</el-link>
									</div>
								</div>
								<div class="brief-body">
									<span>答案：{{ item.answer }}</span>
								</div>
								<div class="brief-floote">
									<span>小题讲解：{{ item.explains }}</span>
								</div>
								<div class="more-floote">
									<span class="answer">一级知识点：{{ topic.knowledgeA }}</span>
								</div>
								<div class="more-floote">
									<span class="answer">二级知识点：{{ topic.knowledgeB }}</span>
								</div>
							</div>
						</div>
					</div>
					<!-- 选词填空题 -->
					<div v-if="topic.type == '选词填空题'">
						<div class="word_head">
							<div>
								1.
								<span class="type">选词填空题</span>
							</div>
							<div class="word_content ql-editor" ref="word_content" v-html="topic.smallTopic"></div>
							<span class="score">({{ topic.fraction }}分)</span>
						</div>
						<div class="more-floote">
							<span class="more-floote-answer">答案：{{ topic.answer }}</span>
						</div>
						<div class="more-floote">
							<span class="answer">小题讲解：{{ topic.explains }}</span>
						</div>
						<div class="more-floote">
							<span class="answer">一级知识点：{{ topic.knowledgeA }}</span>
						</div>
						<div class="more-floote">
							<span class="answer">二级知识点：{{ topic.knowledgeB }}</span>
						</div>
					</div>
				</div>

				<div class="operation">
					<ul class="end">
						<li @click="previous()">
							<el-button type="primary">
								<i class="el-icon-arrow-left"></i>
								<span>上一题</span>
							</el-button>
						</li>
						<li @click="mark()">
							<el-button type="warning">
								<i class="el-icon-star-off"></i>
								<span>收藏</span>
							</el-button>
						</li>
						<li @click="next()">
							<el-button type="primary">
								<span>下一题</span>
								<i class="el-icon-arrow-right"></i>
							</el-button>
						</li>
					</ul>
				</div>
			</div>
		</transition>
	</div>
</template>

<script>
import Cookies from 'js-cookie'
import { getRandomQuestion, getQuestionBankCout } from '@/api/train/questionbank'
export default {
	name: 'MyTrain',
	data() {
		return {
			msg: '',
			userInput: [],
			title: '请选择正确的选项',
			showAnswer: false, //查看答案
			topic: {}, //题目信息
			topicCount: null, //题目总数
			stuOptions: [], //保存考生所有选择题的选项
			number: 1, //题号
			index: 0, //全局index
		}
	},
	created() {
		this.getExamData()
	},

	methods: {
		getExamData() {
			//大题下的小题
			let obj = this.topic.bankList || {}
			let arr = Object.keys(obj)
			this.smallt = this.arr
			let len = arr.length
			//获取当前试卷所有信息
			this.topic = this.trainInfo
			console.log('@@@@', this.topic)
			this.showQuestion = this.trainInfo.translation
			this.options = this.trainInfo.options
			// 获取题目总数
			let trianToken = JSON.parse(Cookies.get('trianToken'))
			getQuestionBankCout(`${trianToken.typeId}`, `${trianToken.tempId}`).then((response) => {
				this.topicCount = response
			})
		},
		//上一题
		previous() {
			this.reset()
			if (this.number <= 1) {
				this.$message({
					message: '当前为第一题',
					type: 'error',
				})
			} else {
				this.number = this.number - 1
				this.getRandomTopic()
			}
		},
		//下一题
		next() {
			this.reset()
			this.getRandomTopic()
			this.number = this.number + 1
		},
		// 随机获取题目
		getRandomTopic() {
			let trianToken = JSON.parse(Cookies.get('trianToken'))
			getRandomQuestion(
				`${trianToken.typeId}`,
				`${trianToken.tempId}`,
				`${trianToken.beanName}`
			).then((response) => {
				this.stuOptions = []
				this.topic = response
				console.log('this.topic: ', this.topic)
			})
		},
		// 选项切换
		getChangeLabel(val) {
			this.stuOptions[this.index] = val //当前选择的序号
		},
		//标记功能
		mark() {
			this.$message({
				message: '收藏成功！',
				type: 'warning',
			})
		},
		reset() {
			this.showAnswer = false
			this.userInput = []
		},
		// 查看答案
		showAnswers() {
			this.showAnswer = !this.showAnswer
			console.log(11111)
		},
		// 保存
		save() {
			this.$message({
				message: '保存成功！',
				type: 'success',
			})
		},
	},
	computed: {
		trainInfo() {
			return JSON.parse(Cookies.get('train'))
		},
		total() {
			return this.topic.bankList
		},
	},
	mounted() {},
}
</script>

<style lang="scss">
/* slider过渡效果 */
.slider-fade-enter-active {
	transition: all 0.3s ease;
}
.slider-fade-leave-active {
	transition: all 0.3s cubic-bezier(1, 0.5, 0.8, 1);
}
.slider-fade-enter,
.slider-fade-leave-to {
	transform: translateX(-100px);
	opacity: 0;
}
// 答题
#answer {
	height: 100%;
}
.answer-content {
	padding: 10px 10px 10px 14px;
	display: flex;
	flex-direction: column;
	height: 100%;
	background-color: #eee;
	.answer-conten > div {
		margin-left: 20px;
		& > div {
			line-height: 30px;
			height: 30px;
		}
	}
	.el-radio-group {
		margin-left: 20px;
	}
}
.answer-content .title {
	height: 50px;
	line-height: 50px;
	padding: 0 10px;
	text-align: left;
	background-color: #fff;
	margin: 10px 0;
	display: flex;
	justify-content: space-between;
	.answer-content .title .show-answer-btn {
		margin: 5px 5px 0px 0px;
	}
	.answer-content .content .tips {
		text-indent: 4px !important;
	}
}
.answer-content .topic-container {
	flex: 1;
	width: 100%;
	padding: 10px;
	background-color: #fff;
	overflow-y: auto;
	.el-radio {
		display: block;
		margin: 20px 10px 20px 10px;
		width: 100%;
	}
	.el-radio__inner {
		width: 18px;
		height: 18px;
	}
	.el-radio__label {
		letter-spacing: 0.8px;
	}
	.el-radio-group {
		display: block;
		width: 100%;
	}
}
.answer-content .topic {
	font-size: 17px;
	line-height: 20px;
	height: 20px;
	.number {
		font-weight: 700;
		font-size: 20px;
	}
	.answer-content .topic .number {
		display: inline-block;
		margin-left: 8px;
	}
}

.answer-content .operation {
	height: 72px;
}
.answer-content .operation .end {
	height: 50px;
	line-height: 50px;
	text-align: center;
	background-color: rgb(21, 255, 0);
	list-style: none;
	padding: 0 10px;
	display: flex;
	background-color: #fff;
	justify-content: space-between;
}
// 答案分析
.analysis {
	margin-top: 20px;
	.right {
		color: #2776df;
		font-size: 18px;
		border: 1px solid #2776df;
		padding: 0px 6px;
		border-radius: 4px;
		margin-left: 20px;
	}
	ul {
		list-style: none;
	}
	ul li:nth-child(1) {
		font-weight: normal;
	}
	ul li:nth-child(2) {
		margin: 20px 0px;
	}
	ul li:nth-child(3) {
		padding: 10px;
		background-color: #d3c6c9;
		border-radius: 4px;
	}
	.answer-right {
		color: #2776df;
		font-size: 18px;
		margin-left: 20px;
	}
	.answer-right.analysis {
		color: #999;
	}
}
.analysis span:nth-child(1) {
	font-size: 18px;
}
.show-answer-btn {
	margin-left: 15px;
}
.mark {
	position: absolute;
	width: 4px;
	height: 4px;
	content: '';
	background-color: red;
	border-radius: 50%;
	top: 0px;
	left: 22px;
}
.more-header .type {
	margin-right: 0;
}
.brief-cotainer,
.bank-cotainer {
	margin: 0;
}
.oneselect-header-title {
	padding: 0 0 0 5px;
}
.user-input {
	margin-bottom: 10px;
}
.user-input > input {
	border: none;
	border-bottom: 1px solid #999;
	outline: none;
	padding: 0 10px;
	line-height: 30px;
}
.user-input > span {
	display: inline-block;
	line-height: 30px;
	vertical-align: top;
}
.user-textarea {
	width: calc(100% - 20px);
	margin: 10px;
	padding: 10px;
}
.answer-container {
	font-size: 14px;
	padding: 10px;
	color: #666;
	.answer-detial {
		margin-bottom: 10px;
		> span:first-child {
			font-weight: bold;
			color: #333;
			min-width: 85px;
			text-align: right;
			display: inline-block;
		}
	}
	.explain {
		> span:first-child {
			font-weight: bold;
			color: #333;
			min-width: 85px;
			text-align: right;
			display: inline-block;
		}
	}
	.knowledge {
		> span:first-child {
			font-weight: bold;
			color: #333;
			min-width: 85px;
			text-align: right;
			display: inline-block;
		}
	}
}
</style>
